<script setup lang="ts">
  import {SUCCESS_CODE} from '~/common/constants'
  const props = defineProps({
    column: {
      type: Object,
      require: false
    },
    showBtn: {
      type: Boolean,
      require: false,
      default: true
    }
  })
  const previewFileList = ref([])
  const showModal= ref(false)
  const bodyStyle= ref({
    width: '600px'
  })
  const segmented = ref({
    content: 'soft',
    footer: 'soft'
  })
  const model = ref({
    id: '',
    name: '',
    content: '',
    thumbImage: ''
  })
  const formRef = ref<FormInst | null>(null)
  const rules: FormRules = ref({
    name: [
      {
        required: true,
        validator (rule: FormItemRule, value: string) {
          if (!value) {
            return new Error('请输入专栏名称')
          }
          return true
        },
        trigger: ['input', 'blur']
      }
    ],
    name: [
      {
        required: true,
        validator (rule: FormItemRule, value: string) {
          if (!value) {
            return new Error('请输入专栏名称')
          }
          return true
        },
        trigger: ['input', 'blur']
      }
    ],

  })
  const nuxtApp = useNuxtApp()
  const emit = defineEmits(['change'])

  function createColumn(e) {
    e.preventDefault()
    formRef.value?.validate(async (errors) => {
      if (!errors) {
        // 新增
        const modelVal = model.value
        // const reqData = new FormData();
        // reqData.append('name', modelVal.name)
        // reqData.append('thumbImage', previewFileList.value[0].file || modelVal.thumbImage)
        // reqData.append('description', modelVal.content)
        let reqData = {
          name: modelVal.name,
          description: modelVal.content
        }
        const isUpdate = !!modelVal.id
        // if (isUpdate) reqData.append('id', model.value.id)
        if (isUpdate) reqData.id = modelVal.id
        const {data, msg, code} = await nuxtApp.$request('/u/authology', {
          method: isUpdate ? 'PUT' : 'POST',
          server: false,
          key: 'createUAuthology',
          body: reqData
        })
        if(code === SUCCESS_CODE) {
          emit('change', true)
          showModal.value = false
          nuxtApp.$mutual.message.success(msg)
        }
      } else {
        console.log(errors)
        nuxtApp.$mutual.message.warning(errors.message, {

        })
      }
    })
  }
  function modalOpen(column?) {
    if (props.column?.id || column) {
      const columnCopyData = props.column?.id ? {...props.column} : {...column}
      model.value = {
        id: columnCopyData.id,
        name: columnCopyData.name,
        content: columnCopyData.description,
        thumbImage: columnCopyData.thumbImage
      }
    }
    showModal.value = true
  }
  watch(showModal, (n) => {
    if (!n) {
      model.value = {
        id: '',
        name: '',
        content: '',
        thumbImage: ''
      }
    }
  })
  defineExpose({
    modalOpen
  })
</script>
<template>
  <div class="list-create" v-if="showBtn" @click="showModal = true">
    <svg width="10" height="10" viewBox="0 0 10 10" fill="none"
         xmlns="http://www.w3.org/2000/svg" class="add-icon">
      <path fill-rule="evenodd" clip-rule="evenodd"
            d="M5.17951 0C5.29095 0 5.33136 0.0116032 5.37211 0.0333916C5.41285 0.05518 5.44482 0.0871535 5.46661 0.127894C5.4884 0.168635 5.5 0.209046 5.5 0.320486V4.5H9.67951C9.79095 4.5 9.83136 4.5116 9.87211 4.53339C9.91285 4.55518 9.94482 4.58715 9.96661 4.62789C9.9884 4.66864 10 4.70905 10 4.82049V5.17951C10 5.29095 9.9884 5.33136 9.96661 5.37211C9.94482 5.41285 9.91285 5.44482 9.87211 5.46661C9.83136 5.4884 9.79095 5.5 9.67951 5.5H5.49975L5.5 9.67951C5.5 9.79095 5.4884 9.83136 5.46661 9.87211C5.44482 9.91285 5.41285 9.94482 5.37211 9.96661C5.33136 9.9884 5.29095 10 5.17951 10H4.82049C4.70905 10 4.66864 9.9884 4.62789 9.96661C4.58715 9.94482 4.55518 9.91285 4.53339 9.87211C4.5116 9.83136 4.5 9.79095 4.5 9.67951L4.49975 5.49975L0.320486 5.5C0.209046 5.5 0.168635 5.4884 0.127894 5.46661C0.0871535 5.44482 0.05518 5.41285 0.0333916 5.37211C0.0116032 5.33136 0 5.29095 0 5.17951V4.82049C0 4.70905 0.0116032 4.66864 0.0333916 4.62789C0.05518 4.58715 0.0871535 4.55518 0.127894 4.53339C0.168635 4.5116 0.209046 4.5 0.320486 4.5L4.5 4.49975V0.320486C4.5 0.209046 4.5116 0.168635 4.53339 0.127894C4.55518 0.0871535 4.58715 0.05518 4.62789 0.0333916C4.66864 0.0116032 4.70905 0 4.82049 0H5.17951Z"
            fill="#1E80FF"></path>
    </svg>
    <span>{{model.id ? '修改' :  '新建'}}专栏</span>
  </div>
  <ClientOnly>
    <n-modal
      v-model:show="showModal"
      class="custom-card"
      preset="card"
      :style="bodyStyle"
      :title="`${model.id ? '修改' :  '新建'}专栏`"
      size="huge"
      :bordered="false"
      :segmented="segmented"
    >
      <!--<template #header-extra>-->
      <!--''-->
      <!--</template>-->
      <div>
        <n-form ref="formRef" :model="model" :rules="rules">
          <n-form-item path="name" label="专栏名称">
            <n-input v-model:value="model.name" placeholder="请输入专栏名称"/>
          </n-form-item>
          <n-form-item path="content" label="专栏简介">
            <n-input
              v-model:value="model.content"
              type="textarea"
              placeholder="请输入专栏简介"
              :maxlength="150"
              :show-count="true"
            />
          </n-form-item>
          <n-form-item label="专栏封面" path="headImage">
            <n-upload
              :max="1"
              :default-upload="false"
              :default-file-list="previewFileList"
              list-type="image-card"
              @preview="handlePreview"
              @change="uploadLocal"
            />
          </n-form-item>
        </n-form>
      </div>
      <template #footer>
        <div style="display: flex; justify-content: flex-end">
          <n-button class="cancel-btn" type="primary" ghost @click="showModal = false">
            取消
          </n-button>
          <n-button
            :disabled="!model.name"
            type="primary"
            @click="createColumn"
          >
            确定
          </n-button>
        </div>
      </template>
    </n-modal>
  </ClientOnly>
</template>
<style scoped lang="scss">
  .list-create {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    color: #1e80ff;
    font-size: 14px;
    cursor: pointer;
  }
  .add-icon {
    width: 10px;
    height: 10px;
    margin-right: 5px;
  }
  .cancel-btn {
    margin-right: 12px;
  }
</style>
